<template>
    <div  style="height:3000px; display: flex; flex-direction: column; overflow: hidden;">
      <el-scrollbar style="flex: 1; --el-scrollbar-bg-color: #f0f2f5;">
     <!-- 深加工信息模块 -->
     <div class="breeding-card" style="margin-left: 0px;">
          <div class="card-header">
            <h2>深加工信息  <el-button size="big" type="primary" @click="open()">设置</el-button></h2>
           
          </div>
          <div class="info-grid">
            <div class="info-row">
              <span>班组：{{ teamslist.teams }}</span>
              <span>负责人：{{ teamslist.personName }}</span>
            </div>
    
          </div>
        </div>
        <!-- 食品安全信息图片 -->
    <div style="margin-top: 50px ;margin-left: 20px;"class="breeding-card" >
        <h2>食品安全信息</h2>
        <!-- 图片容器 -->
  <div style="display: flex; align-items: flex-start; gap: 25px; margin-left: 20px;">    
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList1"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 113, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
  </div>
          <!-- 供应商信息 -->
  <div style="margin-top: 50px;margin-left: 20px;" class="breeding-card" >
        <h2>供应商信息 </h2>
           <!-- 原料信息模块 -->
  <h3 style="margin-left: 20px;">原料 <el-button size="big" type="primary" @click="open1()">设置</el-button></h3>
    <div class="info-grid"  style="margin-left: 20px;">
            <div class="info-row">
              <span>生产批次：{{ sipmop.sBatch}}</span>
            </div>
            <div class="info-row">
              <span>相关资料</span>
            </div>
            <div class="info-row">

        <!-- 图片容器 -->
    <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList2"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 107, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
            </div>
          </div>
          <!-- 分割线 -->
<div style="margin: 20px 20px;  border: 0;border-top: 1px solid #eee;"></div>
   <!-- 辅料信息模块 -->
   <h3 style="margin-left: 20px;">辅料 <el-button size="big" type="primary" @click="open2()">设置</el-button></h3>
    <div class="info-grid"  style="margin-left: 20px;">
            <div class="info-row">
              <span>生产批次：{{ sipmop1.sBatch}}</span>
            </div>
            <div class="info-row">
              <span>相关资料</span>
            </div>
            <div class="info-row">

        <!-- 图片容器 -->
    <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList3"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 108, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
 </div>
</div>
    <!-- 分割线 -->
    <div style="margin: 20px 20px;  border: 0;border-top: 1px solid #eee;"></div>
<!-- 添加剂信息模块 -->
<h3 style="margin-left: 20px;">添加剂 <el-button size="big" type="primary" @click="open3()">设置</el-button></h3>
    <div class="info-grid"  style="margin-left: 20px;">
            <div class="info-row">
              <span>生产批次：{{ sipmop2.sBatch}}</span>
            </div>
            <div class="info-row">
              <span>相关资料</span>
            </div>
            <div class="info-row">

        <!-- 图片容器 -->
    <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList4"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 109, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
 </div>
</div>
    <!-- 分割线 -->
    <div style="margin: 20px 20px;  border: 0;border-top: 1px solid #eee;"></div>
<!-- 包材信息模块 -->
<h3 style="margin-left: 20px;">包材 <el-button size="big" type="primary" @click="open4()">设置</el-button></h3>
    <div class="info-grid"  style="margin-left: 20px;">
            <div class="info-row">
              <span>生产批次：{{ sipmop3.sBatch }}</span>
            </div>
            <div class="info-row">
              <span>相关资料</span>
            </div>
            <div class="info-row">

        <!-- 图片容器 -->
    <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList5"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 110, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div>
 </div>
</div>

</div>
<!-- 企业信息 -->
<div style="margin-top: 50px;margin-left: 20px;" class="breeding-card">
          <div class="card-header">
            <h2>企业信息  <el-button size="big" type="primary" @click="open5()">设置</el-button></h2>
           
          </div>
          <div class="info-grid">
            <div class="info-row">
              <span>公司名称：{{ enterads.supName }}</span>
              <span>生产许可证号：{{ enterads.license}}</span>
            </div>
    
          </div>
        </div>

        <!--企业照片 -->
        <div style="margin-top: 50px;margin-left: 20px; "  class="breeding-card" >
        <h2>企业照片</h2>
  
        <!-- 图片容器 -->
  <div style="display: flex; align-items: flex-start; gap: 25px;margin-left: 20px;">
    <!-- 上传区域 -->
    <div style="display: flex; flex-direction: column; gap: 15px;">
      <el-upload
        v-model:file-list="fileList6"
        action="http://localhost:5013/api/Pic/UploadImage/upload"
        :data="{ picType: 106, batch: route.query.batch }"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <el-icon><Plus /></el-icon>
      </el-upload>
      <div style="color: #666; font-size: 14px;">
      </div>
    </div>
  </div> 
</div>

</el-scrollbar>
</div>
<!-- 供应商原料信息弹框 -->
<el-dialog v-model="dialogFormVisible1" title="供应商信息--原料" width="500">
    <el-form :model="form">
      <el-form-item label="生产批次">
        <el-input v-model="form.sBatch" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="Addsupplier()">确认</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 供应商辅料信息弹框 -->
  <el-dialog v-model="dialogFormVisible2" title="供应商信息--辅料" width="500">
    <el-form :model="form1">
      <el-form-item label="生产批次">
        <el-input v-model="form1.sBatch" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="Addsupplier1()">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 供应商添加剂信息弹框 -->
  <el-dialog v-model="dialogFormVisible3" title="供应商信息--添加剂" width="500">
    <el-form :model="form2">
      <el-form-item label="生产批次">
        <el-input v-model="form2.sBatch" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取消</el-button>
        <el-button type="primary" @click="Addsupplier2()">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 供应商包材信息弹框 -->
  <el-dialog v-model="dialogFormVisible4" title="供应商信息--包材" width="500">
    <el-form :model="form3">
      <el-form-item label="生产批次">
        <el-input v-model="form3.sBatch" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">取消</el-button>
        <el-button type="primary" @click="Addsupplier3()">确认</el-button>
      </div>
    </template>
  </el-dialog>

<!-- 深加工信息弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="深加工信息" width="500">
    <el-form :model="teamsd">
      <el-form-item label="班组" :label-width="formLabelWidth">
        <el-input v-model="teamsd.teams" autocomplete="off" />
      </el-form-item>

      <el-form-item label="负责人" :label-width="formLabelWidth">
        <el-input v-model="teamsd.personName" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddTeams()">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 企业信息弹窗 -->
  <el-dialog v-model="dialogFormVisible5" title="企业信息" width="500" draggable>
    <el-form :model="teamsd">
      <el-form-item label="公司名称" :label-width="formLabelWidth">
        <el-input v-model="enterpe.supName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="生产许可证号" :label-width="formLabelWidth">
        <el-input v-model="enterpe.license" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible5 = false">取消</el-button>
        <el-button type="primary" @click="updateenter()">确认</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
  import type { ImageProps } from 'element-plus';
  import { ref, reactive, onMounted,watch  } from 'vue';
  import moment, { isDate } from 'moment'
  import axios from 'axios';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useCounterStore } from '@/stores/counter';
  import { useRouter, useRoute } from 'vue-router';
  import type { UploadProps, UploadUserFile } from 'element-plus';
  import { regionData } from 'element-china-area-data'

import { pcaTextArr } from 'element-china-area-data'
import { ElCascader } from 'element-plus'
import router from '@/router';

const selectedOptions = ref([])

  const tableData =ref([])
  const dialogFormVisible = ref(false)
  const dialogFormVisible1 = ref(false)
  const dialogFormVisible2 = ref(false)
  const dialogFormVisible3 = ref(false)
  const dialogFormVisible4 = ref(false)
  const dialogFormVisible5 = ref(false)
const formLabelWidth = '140px'

//深加工所需数据
const teamsd=reactive({
    teams:'',
    personName:'',
    batch:'',
})

//添加深加工信息弹窗
const open=()=>{
    dialogFormVisible.value=true;
}
//添加深加工信息方法
const AddTeams=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddTeams',
        method:'post',
        data:{
          teams:teamsd.teams,
          personName:teamsd.personName,
          batch:route.query.batch,
        }
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success("操作成功");
            dialogFormVisible.value=false;

        }
    })
}

//存储深加工数据变量
const teamslist=ref([]);
//查询深加工信息
const getTeamsList=()=>{
    axios({
        url:'http://localhost:5011/api/Product/QueryTeams',
        method:'get',
        params:{
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
            teamslist.value=res.data.data;
            teamsd.teams=res.data.data.teams
            teamsd.personName=res.data.data.personName
        }
    })
}
//生命周期钩子函数
onMounted(()=>{
    getTeamsList();//查询深加工信息
    getsupplier();//查询原料信息
    getsupplier1();//查询辅料信息
    getsupplier2();//查询添加剂信息
    getsupplier3();//查询包材信息
    selePic3();//食品安全信息
    selePic4();//查询原料图片
    selePic5();//查询辅料图片
    selePic6();//查询添加剂图片
    selePic7();//查询包材图片
    selePic8();//查询包材图片
    getenter();//查询企业
    getSupAll()//查询深加工模块信息完成度
})
const poiuyt3=ref([]);
//查询深加工模块信息完成度
  const getSupAll=()=>{
    axios({
      url:'http://localhost:5011/api/Product/QuerySupAll',
      method:'get',
      params:{
        ProId:route.query.proId,
        Batch:route.query.batch
      }
    }).then(res=>{
      if(res.data.code==101){
        poiuyt3.value=res.data.data
        console.log('屠宰信息完成度',poiuyt2.value)
      }
    })
  }
const roupostp=ref([]);
// 供应商品所需数据
const form = reactive({
    suName: '原料',
    sBatch: '',
    batch: '',
    scategory: '原料'
})
//添加供应商品原料信息方法
const Addsupplier=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddSupplier',
        method:'post',
        data:{
          suName:form.suName,
          sBatch:form.sBatch,
          batch:route.query.batch,
          scategory:form.scategory
        }
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success('操作成功');
            dialogFormVisible1.value=false; 
            getsupplier();
        } 
    })
}
//查询表量
let supperliersc=reactive({
  Scategory:'原料',
  Scategory1:'辅料',
  Scategory2:'添加剂',
  Scategory3:'包材',
})
//存储供应商原料数据变量
const sipmop=reactive({
  suName:'',
  sBatch:'',
  batch:'',
  scategory:'',

});
//查询供应商品原料信息
const getsupplier=()=>{
  axios({
        url:'http://localhost:5011/api/Product/QuerySupplier',
        method:'get',
        params:{
          Scategory:supperliersc.Scategory,
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
         
          sipmop.suName=res.data.list[0].suName
          sipmop.sBatch=res.data.list[0].sBatch
          sipmop.batch=res.data.list[0].batch
          sipmop.scategory=res.data.list[0].scategory
        }

    })
}
//存储供应商辅料数据变量
const sipmop1=reactive({
  suName:'',
  sBatch:'',
  batch:'',
  scategory:'',

});
// 供应商品所需数据
const form1 = reactive({
    suName: '辅料',
    sBatch: '',
    batch: '20170419',
    scategory: '辅料'
})
//添加供应商品辅料信息方法
const Addsupplier1=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddSupplier',
        method:'post',
        data:{
          suName:form1.suName,
          sBatch:form1.sBatch,
          batch:route.query.batch,
          scategory:form1.scategory
        }
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success('操作成功');
            dialogFormVisible2.value=false; 
            getsupplier();
        } 
    })
}
//查询供应商品辅料信息
const getsupplier1=()=>{
  axios({
        url:'http://localhost:5011/api/Product/QuerySupplier',
        method:'get',
        params:{
          Scategory:supperliersc.Scategory1,
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
          sipmop1.suName=res.data.list[0].suName
          sipmop1.sBatch=res.data.list[0].sBatch
          sipmop1.batch=res.data.list[0].batch
          sipmop1.scategory=res.data.list[0].scategory
        }

    })
}
//存储供应商添加剂数据变量
const sipmop2=reactive({
  suName:'',
  sBatch:'',
  batch:'',
  scategory:'',

});
// 供应商品所需数据
const form2 = reactive({
    suName: '添加剂',
    sBatch: '',
    batch: '20170419',
    scategory: '添加剂'
})
//添加供应商品添加剂信息方法
const Addsupplier2=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddSupplier',
        method:'post',
        data:{
          suName:form2.suName,
          sBatch:form2.sBatch,
          batch:route.query.batch,
          scategory:form2.scategory
        }
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success('操作成功');
            dialogFormVisible3.value=false; 
            getsupplier();
        } 
    })
}
//查询供应商品添加剂信息
const getsupplier2=()=>{
  axios({
        url:'http://localhost:5011/api/Product/QuerySupplier',
        method:'get',
        params:{
          Scategory:supperliersc.Scategory2,
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
          sipmop2.suName=res.data.list[0].suName
          sipmop2.sBatch=res.data.list[0].sBatch
          sipmop2.batch=res.data.list[0].batch
          sipmop2.scategory=res.data.list[0].scategory
        }

    })
}
//存储供应商包材数据变量
const sipmop3=reactive({
  suName:'',
  sBatch:'',
  batch:'',
  scategory:'',

});
// 供应商品所需数据
const form3 = reactive({
    suName: '包材',
    sBatch: '',
    batch: '20170419',
    scategory: '包材'
})
//添加供应商品包材信息方法
const Addsupplier3=()=>{
    axios({
        url:'http://localhost:5013/api/Shop/AddSupplier',
        method:'post',
        data:{
          suName:form3.suName,
          sBatch:form3.sBatch,
          batch:route.query.batch,
          scategory:form3.scategory
        }
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success('操作成功');
            dialogFormVisible4.value=false; 
            getsupplier();
        } 
    })
}
//查询供应商品包材信息
const getsupplier3=()=>{
  axios({
        url:'http://localhost:5011/api/Product/QuerySupplier',
        method:'get',
        params:{
          Scategory:supperliersc.Scategory3,
          Batch:route.query.batch
        }
    })
    .then(res=>{
        if(res.data.code==101){
          sipmop3.suName=res.data.list[0].suName
          sipmop3.sBatch=res.data.list[0].sBatch
          sipmop3.batch=res.data.list[0].batch
          sipmop3.scategory=res.data.list[0].scategory
        }

    })
}
// 打开弹窗时初始化数据
const open1 = async () => {
  await getenter()
  dialogFormVisible1.value = true
}
// 打开弹窗时初始化数据
const open2 = async () => {
  await getenter()
  dialogFormVisible2.value = true
}
// 打开弹窗时初始化数据
const open3 = async () => {
  await getenter()
  dialogFormVisible3.value = true
}
// 打开弹窗时初始化数据
const open4 = async () => {
  await getenter()
  dialogFormVisible4.value = true
}
// 打开弹窗时初始化数据
const open5 = async () => {
 getenter()
  dialogFormVisible5.value = true
}

//存储企业信息变量
const enterads=ref([]);
//查询企业信息
const getenter=()=>{
    axios({
        url:'http://localhost:5011/api/Product/QueryEnter',
        method:'get',
        params:{
          Batch:route.query.batch
        }
    })
    .then(res=>{
        
            if(res.data.code==101){
              console.log('深加工生产批次',route.query.batch)
              console.log('深加工企业信息',res.data)
            enterads.value=res.data.data;
            enterpe.entId=res.data.data.entId
            enterpe.entName=res.data.data.entName
            enterpe.personName=res.data.data.personName
            enterpe.quantity=res.data.data.quantity
            enterpe.slaName=res.data.data.slaName
            enterpe.supName=res.data.data.supName
            enterpe.estabTime=res.data.data.estabTime?.split('T')[0] || ''
            enterpe.corAddr=res.data.data.corAddr
            enterpe.license=res.data.data.license
            enterpe.batch=res.data.data.batch
            enterpe.sheng=res.data.data.sheng
            enterpe.shi=res.data.data.shi
            enterpe.xian =res.data.data.xian
            enterpe.jianjie=res.data.data.jianjie
            console.log('企业信息',enterpe)
            }
    })
}
// 企业所需数据
const enterpe=reactive({
    entId:2,
    entName:'',
    personName:'',
    quantity:'',
    slaName:'',
    supName:'',
    estabTime:'',
    corAddr:'',
    license:'',
    batch:'',
    sheng:selectedOptions.value[0],
    shi:selectedOptions.value[1],
    xian:selectedOptions.value[2],
    jianjie:''
})
//添加企业信息方法
const updateenter=()=>{
  
    axios({
        url:'http://localhost:5013/api/Shop/UpdateEnter',
        method:'put',
        data:enterpe
    })
    .then(res=>{
        if(res.data.code==101){
            
            ElMessage.success("操作成功");
            dialogFormVisible5.value=false;
            getenter()
        }
    })
}
let route=useRoute();
//图片所需数据
const fileList1 = ref<UploadUserFile[]>([]);
const fileList2 = ref<UploadUserFile[]>([]);
const fileList3 = ref<UploadUserFile[]>([]);
const fileList4 = ref<UploadUserFile[]>([]);
const fileList5 = ref<UploadUserFile[]>([]);
const fileList6 = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref('');
  const dialogVisible = ref(false);
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  deletepic(uploadFile.name);
 console.log(uploadFile, uploadFiles);
  };
  //删除图片
const deletepic=(pictrueId:any)=>{
  axios({
    url:'http://localhost:5013/api/Pic/DeletePic',
    method:'put',
    data:{
      pictureId:pictrueId
    }
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success("操作成功");
    }
  })
}
   
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
  };
    // 查询图片
    const syoo = reactive({
    PicType: 113,
    Batch: route.query.batch
  });
// 查询食品安全信息图片
  const selePic3 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 113, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList1.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};
// 查询供应商原料图片
const selePic4 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 107, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList2.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};

// 查询图片辅料相关材料
const selePic5 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 108, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList3.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};

  
// 查询图片添加剂相关材料
const selePic6 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 109, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList4.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};

  
// 查询图片包材相关材料
const selePic7 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 109, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList5.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};

  // 查询图片企业
  const selePic8 = () => {
  axios.get('http://localhost:5013/api/Pic/QueryPic', {
    params: { PicType: 106, Batch: syoo.Batch }
  }).then(res => {
    if (res.data.code == 101) {
      fileList6.value = res.data.list.map((item:any) => ({
        name: item.pictureId.toString(),
        url: `${item.pictureAddr}`,
        status: 'success'
      }));
    }
  }).catch(error => {
    console.error('请求失败:', error);0
  });
};
</script>

<style scoped>
  .full-container {
    height: 100vh;
    overflow: hidden;
    background: #f0f2f5;
  }
  
  .nav-bar {
    height: 48px;
    background: #545c64;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  
  .nav-item {
    color: white;
    margin-right: 40px;
    cursor: pointer;
  }
  
  .main-content {
    height: calc(100vh - 48px);
    padding: 20px;
    overflow: auto;
  }
  
  .breeding-card,
  .healthcare-card {
    background: white;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .info-grid {
    display: grid;
    gap: 16px;
  }
  
  .info-row {
    display: flex;
    gap: 40px;
    padding: 8px 0;
  }
  
  .data-table {
    margin-top: 16px;
  }
  
  .action-group {
    display: flex;
    gap: 12px;
  }
  
  .new-form {
    margin-top: 16px;
    padding: 16px;
    background: #fafafa;
    border-radius: 4px;
  }
  
  .form-actions {
    margin-top: 12px;
    display: flex;
    gap: 12px;
  }
  </style>
  <style scoped>


  /* 按钮样式统一 */
  .el-button {
    border-radius: 4px;
    padding: 8px 15px;
  }
  </style>